import type { toDoStatusEnum } from '~/store/oam/typings'
import type { MyToDoStateType } from './typings'
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
// import { useRouter } from 'vue-router'
import { ElCard, ElTabs, ElTabPane } from 'element-plus'
import useVuexGetters from '~/hooks/useVuexGetters'
import MyToDoList from './list'
import MyToDoOptions from './options'
// import styles from '../index.module.scss'

export default defineComponent(function MyToDo() {
  const store = useStore()
  // const router = useRouter()
  const toDoList = ref()
  const state = reactive<MyToDoStateType>({
    activeTabKey: 'agency',
    visible: false,
    record: undefined
  })
  const toDoState = useVuexGetters('toDo', ['toDoStatusSelectList', 'toDoStatusEnum'])
  // 切换单选按钮去重新查询列表
  const handleChangeRadioValue = async () => {
    await toDoList?.value?.searchFormRef?.resetFields()
    toDoList?.value?.toSearch()
  }
  // 切换我的待办查看弹框
  const handleChangeOptionsVisible = (row: any) => {
    if (row?.processDefinitionKey === 'product_patrol') {
      // router.push({ path: '/oam/tour/task/info', query: { id: row?.businessKey } })
      store.dispatch('user/MatchRouterOptionsJumpAddress', {
        path: '/oam/tour/task',
        query: { id: row?.businessKey }
      })
      return
    }
    state.visible = !state.visible
    state.record = row
    if (!state.visible) toDoList?.value?.toSearch()
  }

  // 初始化部门/人员字典
  onMounted(async () => {
    store.dispatch('order/GetTenantUserSelectList')
    store.dispatch('order/GetDeptTreeSelectList')
  })

  return () =>
    !state.visible ? (
      <ElCard>
        <ElTabs v-model={state.activeTabKey} onTab-change={handleChangeRadioValue}>
          {toDoState?.toDoStatusSelectList?.value?.map((item: toDoStatusEnum) => (
            <ElTabPane key={item.key} name={item.key} label={item.value} />
          ))}
        </ElTabs>
        <MyToDoList
          ref={toDoList}
          selectedKey={state.activeTabKey}
          selectedValue={toDoState.toDoStatusEnum.value[state.activeTabKey]}
          handleChangeOptionsVisible={handleChangeOptionsVisible}
        />
      </ElCard>
    ) : (
      <MyToDoOptions
        selectedKey={state.activeTabKey}
        selectedValue={toDoState.toDoStatusEnum.value[state.activeTabKey]}
        visible={state.visible}
        record={state.record!}
        cancel={handleChangeOptionsVisible}
      />
    )
})
